import { useNavigate } from 'react-router-dom'
import { SearchBar } from 'antd-mobile'

const Search = () => {
  const navigate = useNavigate()
  const onFocus = () => {
    navigate('/search')
    let getData = JSON.parse(localStorage.getItem('data'))
    !getData && localStorage.setItem('data', JSON.stringify([]))
  }
  const onSearch = async val => {
    let ls = JSON.parse(localStorage.getItem('data'))
    const flag = val && ls.some(item => item === val)
    ls = !flag && val && ls.length < 7 && ls.concat([val])
    ls && Array.isArray(ls) && localStorage.setItem('data', JSON.stringify(ls))
    let id = JSON.parse(localStorage.getItem('id'))
    localStorage.setItem('name', JSON.stringify(val))
    navigate(`/home/category/${id}`)
  }
  return (
    <div className='search'>
      <SearchBar
        placeholder='请输入内容'
        onFocus={onFocus}
        onBlur={e => onSearch(e.target.value)}
      />
    </div>
  )
}

export default Search
